<template>
  <transition name="scale-fade">
    <div v-if="visible" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white rounded-xl shadow-xl p-6 w-80 max-w-full mx-4 relative">
        <button
          @click="$emit('close')"
          class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"
          aria-label="关闭"
        ><span class="text-lg">✖</span></button>
        <h3 class="text-xl font-semibold mb-4">文件预览</h3>
        <p class="break-words mb-6 text-gray-700">{{ fileName }}</p>
        <button
          @click.prevent="download"
          class="w-full py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
        >下载</button>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
const props = defineProps<{ visible: boolean; fileName: string }>()
const emit = defineEmits<{ (e: 'close'): void }>()

function download() {
  // TODO: Hook真实文件下载逻辑
  alert(`模拟下载: ${props.fileName}`)
}
</script>

<style scoped>
.scale-fade-enter-active, .scale-fade-leave-active {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.scale-fade-enter-from, .scale-fade-leave-to {
  opacity: 0;
  transform: scale(0.95);
}
.scale-fade-enter-to, .scale-fade-leave-from {
  opacity: 1;
  transform: scale(1);
}
</style>
